<template>
  <div class="elheader">
    <el-header style="height: 70px; padding: 5px" class="header">
      <el-container style="display: flex; justify-content: space-between">
        <el-aside width="200px"
          ><img src="http://www.yhachina.com/images/logo.png" alt=""
        /></el-aside>
        <div class="headerspan">
          <div>
              <img 
              v-if="loginID" :src="youImg" alt="" style="width:30px;height: 30px;border-radius:15px;text-align: center;">
            <el-link
              href=""
              v-if="loginID"
              :underline="false"
              type="success"
              class="little"
              >
              {{ loginID }}</el-link
            >
            <el-link
              v-else
              href="/login"
              :underline="false"
              type="success"
              class="little"
              >登录</el-link
            >
            <el-link
              v-if="loginID"
              href="/register"
              :underline="false"
              type="primary"
              class="little"
              ></el-link
            >
            <el-link
            v-else
              href="/register"
              :underline="false"
              type="primary"
              class="little"
              >注册</el-link
            >
            <el-link href="" :underline="false" class="little" type="info"
              >订单管理</el-link
            >

            <el-link
              href="/home/index"
              :underline="false"
              type="success"
              class="little"
              >个人中心</el-link
            >
          </div>
          <div>
            <el-link href="/" :underline="false" class="bold"
              >首页</el-link
            >
            <el-link href="/web-info-about" :underline="false" class="bold"
              >关于我们</el-link
            >
            <el-link href="#mer" :underline="false" class="bold"
              >旅社预定</el-link
            >
            <el-link href="/nearbyhotel" :underline="false" class="bold"
              >附近旅社</el-link
            >
            <el-link href="/spot" :underline="false" class="bold"
              >附近景点</el-link
            >
            <el-link href="/contact" :underline="false" class="bold"
              >联系总部</el-link
            >
            <el-link href="/consult" :underline="false" class="bold">最新资讯</el-link>
          </div>
        </div>
      </el-container>
    </el-header>
  </div>
</template>

<script>
import Spot from '@/components/Spot.vue'

export default {
  components: { Spot },
  data() {
    return {
      loginID: '',
      youImg:'',
    }
  },
  // 页面挂载完毕后,加载资源
  mounted() {
    // 获取用户名
    let loginID = JSON.parse(sessionStorage.getItem('user'))
    console.log('user', loginID)
    this.loginID = loginID.uname
    // 获取头像
    this.youImg=loginID.uhead
  },
}
</script>

<style lang="scss">
.headerspan {
  position: relative;
  // margin-right: 10px;
  right: 0;
  width: 600px;

  div:nth-child(1) {
    position: absolute;
    top: 5px;
    height: 35px;
    right: 0;
    width: 250px;
    display: flex;
    justify-content: space-between;
    line-height: 35px;

    .little {
      font-weight: 300;
      font-size: 12px;
    }
  }

  div:nth-child(2) {
    position: absolute;
    width: 600px;
    right: 0;
    top: 35px;
    display: flex;
    justify-content: space-between;
    line-height: 35px;

    .bold {
      font-weight: bold;
      color: black;
    }
  }
}

.header {
  width: 1300px;
  margin: 0 auto;
}

.el-carousel img {
  width: 100%;
}

.trip {
  width: 900px;
  display: flex;
  margin: 20px auto;
  justify-content: space-between;
}

.lvshe {
  width: 1300px;
  margin: 30px auto;

  .lvshee {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}
</style>
